<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3211631_ux8okfjff3a.css">
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body,
    #root {
      width: 100%;
      height: 100%;
      /* font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; */
    }

    #root {
      display: flex;
    }

    #box1 {
      width: 200px;
      height: 100%;
      background-color: rgb(87, 85, 85);
      transition: all .5s;
    }

    #box1 ul li {
      color: #fff;
      font-weight: 600;
      font-size: 20px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transition: all .5s;
    }

    #box1 ul li:hover {
      color: rgb(241, 199, 120);
      cursor: pointer;
    }

    #box2 {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .iconfont {
      font-size: 36px;
    }

    .icon-caidan {
      font-size: 20px;
    }

    .top {
      width: 100%;
      height: 60px;
      color: rgb(241, 199, 120);
      padding-top: 20px;
      font-size: 20px;
      font-weight: 600;
      background-color: rgb(87, 85, 85);
      /* box-shadow: 0px 7px 10px -7px #ccc; */
    }

    .top span {
      position: relative;
    }

    #box2 .content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #box2 .content div {
      border: 5px solid #ccc;
      border-radius: 15px;
      width: 800px;
      height: 500px;
      box-shadow: 0px 0px 10px 5px #ccc;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">

</head>

<body>
  <div id="root">
    <div id="box1" :style="{width:box1Width}">
      <ul>
        <li @click="who='index'"><span class="iconfont icon-caidan"></span>&nbsp;后台{{widthFn}}</li>
        <li @click="who='goods'"><span class="iconfont icon-caidan"></span>&nbsp;商品{{widthFn}}</li>
        <li @click="who='orders'"><span class="iconfont icon-caidan"></span>&nbsp;订单{{widthFn}}</li>
        <li @click="who='users'"><span class="iconfont icon-caidan"></span>&nbsp;用户{{widthFn}}</li>
      </ul>
    </div>
    <div id="box2">
      <div class="top">
        <span :class="cutClass[number]" @click="clickFn"></span>
        <span style="top:-8px">后台首页 &gt;</span>
        <transition appear enter-active-class="animated bounceIn">
          <span v-for="item in 
          [
          {id:1,url:'index',name:'后台管理'},
          {id:2,url:'goods',name:'商品管理'},
          {id:3,url:'orders',name:'订单管理'},
          {id:4,url:'users',name:'用户管理'}
          ]" style="top:-8px;display: inline-block;" v-if="who===item.url" :key="item.id">{{item.name}}</span>
        </transition>

      </div>
      <div class="content">
        <transition appear enter-active-class="animated bounceInRight" style="-webkit-backface-visibility: hidden;
        backface-visibility: hidden;">
          <component :is="who"></component>
        </transition>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('index', {
      template: `
      <div>
        <h1>后台首页</h1>
      </div>
      `
    })
    Vue.component('goods', {
      template: `
      <div>
        <h1>商品管理</h1>
      </div>
      `
    })
    Vue.component('orders', {
      template: `
      <div>
        <h1>订单管理</h1>
      </div>
      `
    })
    Vue.component('users', {
      template: `
      <div>
        <h1>用户管理</h1>
      </div>
      `
    })
    const vm = new Vue({
      el: "#root",
      data: {
        who: 'index',
        box1Width: '200px',
        cutClass: ['iconfont  icon-shouqicaidan', 'iconfont  icon-zhankaicaidan'],
        number: 0
      },
      methods: {

        clickFn() {
          if (this.box1Width === '200px') {
            this.box1Width = '90px'
            this.number = 0
          } else {
            this.box1Width = '200px'
            this.number = 1
          }
          /* ? :  */
        },

      },
      computed: {
        widthFn() {
          return this.box1Width === '200px' ? '首页' : ''
        }
      }
    })
  </script>
</body>

</html>